/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState, useCallback } from "react";
import { Col, Row } from "antd";
import { connect } from "dva";
import MenuItem from "./MenuItem";
import styles from "./Menu.less";

// 一列菜单
const ColumnButton = ({ className, menuData = {}, sub_button = [], onClick, checkedKey }) => (
  <Row className={className}>
    <Col className={styles.subMenuName}>
      {sub_button.map((item, index) => (
        <MenuItem
          key={item.menuKey}
          menuData={item}
          menuKey={item.menuKey}
          onClick={onClick}
          checked={checkedKey == item.menuKey}
          showBorder={index !== sub_button.length - 1}
        />
      ))}
    </Col>
    <Col className={styles.bottomMenu}>
      <MenuItem
        menuData={menuData}
        onClick={onClick}
        checked={checkedKey == menuData.menuKey}
        showBorder={false}
        showBg={false}
      />
    </Col>
  </Row>
);

const MenuContent = ({ buttonList = [], className, dispatch, showMenuSetting }) => {
  const [checkedKey, setCheckedKey] = useState("");

  const onMenuItemClick = menuData => {
    const { menuKey, checked } = menuData;
    setCheckedKey(!checked ? menuKey : "");
    dispatch({
      type: "wxSettings/save",
      payload: {
        showMenuSetting: !checked,
        selectMenuData: menuData,
      },
    });
  };

  useEffect(
    () => {
      // 清空选中状态
      !showMenuSetting && setCheckedKey("");
    },
    [showMenuSetting]
  );

  return (
    <Row className={className} gutter={[10, 0]}>
      {buttonList.map(item => {
        const subButtonList = [...item.sub_button];
        return (
          <Col key={item.menuKey} span={8}>
            <ColumnButton
              checkedKey={checkedKey}
              className={styles.columnButton}
              menuData={item}
              sub_button={subButtonList}
              onClick={onMenuItemClick}
            />
          </Col>
        );
      })}
    </Row>
  );
};

const Menu = props => {
  const { dispatch, showMenuSetting, updatingMenu } = props;
  const [buttonList, setButtonList] = useState([]);

  const getMenuList = useCallback(
    () => {
      dispatch({
        type: "wxSettings/getMenuList",
      }).then(arr => {
        setButtonList(arr);
      });
    },
    [dispatch]
  );

  // 初始化菜单
  useEffect(
    () => {
      getMenuList();
    },
    [getMenuList]
  );

  // 监听发布后的菜单更新，同步最新的菜单数据
  useEffect(
    () => {
      updatingMenu && getMenuList();
    },
    [updatingMenu, getMenuList]
  );

  return (
    <div className={styles.menu}>
      <img width={400} src="https://cdn-img.kuaidihelp.com/kb_city_web/wxSetting/menuSetting/wechatBg.png" alt="" />
      <MenuContent
        className={styles.menu__menuContent}
        buttonList={buttonList}
        dispatch={dispatch}
        showMenuSetting={showMenuSetting}
      />
    </div>
  );
};

export default connect(({ wxSettings }) => ({
  showMenuSetting: wxSettings.showMenuSetting,
  updatingMenu: wxSettings.updatingMenu,
}))(Menu);
